<template>
  <el-card shadow="never">
    <el-form :model="searchForm" label-width="auto" :inline="true">
      <el-row>
        <el-col :span="6">
          <el-form-item label="合同名称" style="width: 85%">
            <el-input
              v-model="searchForm.contractName"
              placeholder="请输入 合同名称"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="采购单位" style="width: 85%">
            <el-input
              v-model="searchForm.purchaseDeptName"
              placeholder="请输入 采购单位"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目名称" style="width: 85%">
            <el-input
              v-model="searchForm.projectName"
              placeholder="请输入 项目名称"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="付款日期" style="width: 85%">
            <el-date-picker
              v-model="searchForm.date"
              type="daterange"
              range-separator="-"
              start-placeholder="开始"
              end-placeholder="结束"
              size="small"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align: right">
          <el-button
            color="#1E3485"
            size="small"
            :icon="Edit"
            @click="toDetail({ title: '新建付款', action: 'add' }, 'add')"
            >新建</el-button
          >
          <el-button
            size="small"
            color="#1E3485"
            :icon="Search"
            @click="
              tablePage.currentPage = 1;
              getlist();
            "
            >搜索</el-button
          >
          <el-button
            size="small"
            type="default"
            :icon="Delete"
            @click="clearAllFields"
            >清空</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-form style="margin-top: 20px">
      <vxe-table
        border
        min-height="300"
        header-align="center"
        :column-config="{ resizable: true }"
        :row-config="{ isHover: true }"
        :data="TableData"
        size="mini"
      >
        <vxe-column type="seq" title="序号" fixed="left" width="60" />
        <vxe-column
          field="contractNo"
          title="合同编号"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="contractName"
          title="合同名称"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="contractTotalPrice"
          title="合同金额(元)"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="purchaseDeptName"
          title="采购单位"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="projectDeptName"
          title="项目所属分公司"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="projectName"
          title="项目名称"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="nodeType"
          title="付款类型"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="receiveDate"
          title="付款时间"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="receivePrice"
          title="付款金额(元)"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="createdBy"
          title="创建人"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="auditStatus"
          title="状态"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="receiveTypeName"
          title="付款方式"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="claimStatus"
          title="认领状态"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="relatedStatus"
          title="发票状态"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column title="操作" fixed="right" width="200" align="center">
          <!-- 操作列按钮 -->
          <template v-slot="{ row }">
            <vxe-button
              v-if="
                row.auditStatus === '待提交' || row.auditStatus === '审批驳回'
              "
              mode="text"
              @click="submitApproval(row)"
              >提交审批</vxe-button
            >
            <vxe-button
              v-if="
                row.auditStatus === '待提交' || row.auditStatus === '审批驳回'
              "
              mode="text"
              @click="
                toDetail(
                  {
                    id: row.id,
                    title: '',
                    action: 'edit'
                  },
                  'edit'
                )
              "
              >编辑</vxe-button
            >
            <vxe-button
              mode="text"
              @click="
                toDetail(
                  {
                    id: row.id,
                    title: '',
                    action: 'view'
                  },
                  'view'
                )
              "
              >查看</vxe-button
            >
            <vxe-button
              v-if="
                row.auditStatus === '待提交' || row.auditStatus === '审批驳回'
              "
              mode="text"
              @click="delApproval(row)"
              >删除</vxe-button
            >
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        v-model:current-page="tablePage.currentPage"
        v-model:page-size="tablePage.pageSize"
        :layouts="[
          'Sizes',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'FullJump',
          'Total'
        ]"
        :total="tablePage.total"
        size="small"
        @page-change="handlePageChange"
      />
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { Delete, Search, Edit } from "@element-plus/icons-vue";
import { VxePagerEvents } from "vxe-table";
//import { useRouter } from "vue-router";
import {
  getpaymentlist,
  delPaymentApprovalApi,
  submitPaymentApprovalApi
} from "@/api/ERP_PaymentMange";

import { useDetail } from "./components/utils/hooks";
import { ElMessage, ElMessageBox } from "element-plus";
// 路由跳转
//const router = useRouter();
const { toDetail, router } = useDetail();

// 表单字段
const searchForm = reactive({
  contractName: "", // 订单编号
  purchaseDeptName: "", //采购单位
  projectName: "", //项目名称
  date: "" //日期
});

onMounted(async () => {
  getlist();
});

// 表格数据
const TableData = ref([]);

// 获取项目订单列表
const getlist = (query?: string) => {
  let params: any = {};
  params.pageIndex = tablePage.currentPage;
  params.pageSize = tablePage.pageSize;
  params.contractName = searchForm.contractName;
  params.purchaseDeptName = searchForm.purchaseDeptName;
  params.projectName = searchForm.projectName;
  getpaymentlist(params).then((response: any) => {
    response.data.records.forEach(res => {
      //创建时间
      if (res.createdAt) {
        const date = new Date(res.createdAt);
        res.createdAt =
          date.getFullYear() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          date.getDate();
      }
      //状态
      if (res.auditStatus == "0") {
        res.auditStatus = "待提交";
      } else if (res.auditStatus == "1") {
        res.auditStatus = "审批中";
      } else if (res.auditStatus == "2") {
        res.auditStatus = "审批通过";
      } else if (res.auditStatus == "3") {
        res.auditStatus = "审批驳回";
      } else if (res.auditStatus == "4") {
        res.auditStatus = "撤回";
      }
      //收款类型
      if (res.nodeType == "0") {
        res.nodeType = "合同预收款";
      } else if (res.nodeType == "1") {
        res.nodeType = "订单预收款";
      } else if (res.nodeType == "2") {
        res.nodeType = "实收款";
      }
      //认领状态
      if (res.claimStatus == "1") {
        res.claimStatus = "未认领";
      } else if (res.claimStatus == "2") {
        res.claimStatus = "部分认领";
      } else if (res.claimStatus == "3") {
        res.claimStatus = "已认领";
      }

      //发票状态
      if (res.relatedStatus == "1") {
        res.relatedStatus = "未关联";
      } else if (res.relatedStatus == "2") {
        res.relatedStatus = "部分关联";
      } else if (res.relatedStatus == "3") {
        res.relatedStatus = "已关联";
      }
    });

    TableData.value = response.data.records;
    tablePage.total = response.data.totalElements;
  });
  if (query) {
    setTimeout(() => {
      getpaymentlist;
    }, 1500);
  }
};

// 表格分页配置
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});

// 清空按钮点击事件
const clearAllFields = () => {
  // 重置SearchForm对象的所有属性
  for (const key in searchForm) {
    if (searchForm.hasOwnProperty(key)) {
      if (key === "signDate") {
        // searchForm[key] = [];
        searchForm[key] = null;
      } else {
        searchForm[key] = "";
      }
    }
  }
};

const submitApproval = row => {
  ElMessageBox.confirm("是否提交审批?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    let params: ApiParams = {};
    params.id = row.id;
    try {
      const response: ApiResponse = await submitPaymentApprovalApi(params);
      if (response.code === 200) {
        ElMessage.success("提交成功");
        getlist();
      } else {
        ElMessage.error("提交失败: " + response.msg);
      }
    } catch (error) {}
  });
};

const delApproval = row => {
  ElMessageBox.confirm("是否删除记录?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    let params: ApiParams = {};
    params.id = row.id;
    try {
      const response: ApiResponse = await delPaymentApprovalApi(params);
      if (response.code === 200) {
        ElMessage.success("删除成功");
        getlist();
      } else {
        ElMessage.error("删除失败: " + response.msg);
      }
    } catch (error) {}
  });
};

// 表格分页事件
const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  getlist();
};
</script>

<style lang="scss" scoped></style>
